{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>恒达科技</title>
    <link href="{% static 'css/home.css' %}" rel="stylesheet">
    <script src="{% static 'js/jqthumb.min.js' %}"></script>
</head>
<body>

{% include 'navbar.html' %}

<div class="container">
    <div id="ad" class="carousel slide" data-ride="carousel" data-interval="5000">
        <ol class="carousel-indicators">
            <li data-target="#ad" data-slide-to="0" class="active"></li>
            <li data-target="#ad" data-slide-to="1"></li>
            <li data-target="#ad" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="{% static 'img/banner1.jpg' %}" alt="广告横幅1">
            </div>
            <div class="item">
                <img src="{% static 'img/banner2.jpg' %}" alt="广告横幅2">
            </div>
            <div class="item">
                <img src="{% static 'img/banner3.jpg' %}" alt="广告横幅3">
            </div>
        </div>
        <a class="left carousel-control" href="#ad" data-slide="prev"><span
                class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#ad" data-slide="next"><span
                class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <div class="row row-3">
        <div class="col-md-4">
            <span class="part1"> <a href="{% url 'aboutApp:survey' %}">企业概况</a> </span>
            <span class="part1 en"> &nbsp;&nbsp;/ About Us </span>
            <div class="line1">
                <div class="line2 theme"></div>
            </div>
            <div style="margin-top:20px;">
                <img class="img-responsive" src="{% static 'img/aboutCompany.jpg' %}" alt="">
                <p class="text1">
                    恒达科技有限企业，位于中国某高新技术产业开发区,
                    以社会公共安全领域为主要应用方向，提供极速、准确和防伪装的人脸识别产品。
                </p>
            </div>
        </div>
        <div class="col-md-8">
            <span class="part1"> <a href="#">新闻动态</a> </span>
            <span class="part1 en"> &nbsp;&nbsp;/ News </span>
            <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'company' %}">
                +&nbsp;更多
            </a>
            <div class="line1">
                <div class="line2 theme"></div>
            </div>
            <div class="col-md-5">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators nav-point">
                        {% for post in postList %}
                            <li data-target="#myCarousel" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}
                                class="active"
                            {% endif %}>
                            </li>
                        {% endfor %}
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner" style="margin-top:15px;">
                        {% for post in postList %}
                            <div {% if forloop.first %} class="item active" {% else %} class="item" {% endif %}
                                                        style="background-size:cover;">
                                <a href="{% url 'newsApp:newDetail' post.id %}">
                                    <img src="{{ post.photo.url }}" alt=""></a>
                                <div class="carousel-caption nav-title">{{ post.title }}</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <ul class="list-unstyled list-new">
                    {% for mynew in newList %}
                        <li>
                            <a href="{% url 'newsApp:newDetail' mynew.id %}">
                                {{ mynew.title|truncatechars:"15" }}</a>
                            <span>【{{ mynew.publishDate|date:"Y-m-d" }}】</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="row row-3">
            <div class="col-md-4">
                <span class="part1"><a href="#">通知公告</a></span>
                <span class="part1 en">&nbsp;&nbsp;/ Public Release</span>
                <a class="btn btn-default btn-xs more-btn" href="{% url 'newsApp:news' 'notice' %}">
                    +&nbsp;更多
                </a>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div>
                    <img class="img-responsive" src="{% static 'img/note.jpg' %}" alt="">
                    <ul class="list-unstyled list-new">
                        {% for note in noteList %}
                            <li>
                                <a href="{% url 'newsApp:newDetail' note.id %}">
                                    {{ note.title|truncatechars:"25" }}
                                </a>
                                <a href="{% url 'newsApp:newDetail' note.id %}" class="public-detail">
                                    查看详情>>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <span class="part1">
                    <a href="{% url 'scienceApp:science' %}">科研基地</a>
                </span>
                <span class="part1 en">
                    &nbsp;&nbsp;/ Technology Center
                </span>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div>
                    <a href="{% url 'scienceApp:science' %}">
                        <img class="img-responsive" src="{% static 'img/ky.jpg' %}" alt="">
                    </a>
                    <p class="text1">
                        <font color="#d30a1c">恒达科技科研基地</font>
                        恒达科研基地分为计算机视觉、 机器人和视觉深度学习三个事业部，共拥有高级研发人员近30名，
                        以各领域高级工程师和知名院校博士为主体的多层次研发梯队。当前，科研基地优秀的技术团队
                        已为恒达在人脸识别、物联网平台搭建、机器人导航等 领域打下了坚实基础
                    </p>
                </div>
            </div>
            <div class="col-md-4">
            <span class="part1">
                <a href="{% url 'contactApp:contact' %}">联系我们</a>
            </span>
                <span class="part1 en">
                &nbsp;&nbsp;/ Contact us
            </span>
                <div class="line1">
                    <div class="line2 theme"></div>
                </div>
                <div>
                    <ul class="list-unstyled procurement-li">
                        <li>业务质询一：111-XXXXXX</li>
                        <li>业务质询二：222-XXXXXX</li>
                        <li>咨询电话：0111-XXXXXX</li>
                        <li>企业传真：0222-XXXXXX</li>
                        <li>地址：某某某新区某某大道1号</li>
                        <li>邮编：XXXXXX</li>
                        <li>
                            网址：<a href="http://baidu.com" target="_blank">http://www.baidu.com</a>
                        </li>
                    </ul>
                    <div class="platform"><a href="{% url 'contactApp:contact' %}">详情</a></div>
                </div>
            </div>
        </div>
        <div class="row row-3">
            <div class="col-md-12 col-pro">
        <span class="part1">
            <a href="{% url 'productsApp:products' 'robot' %}">产品中心</a>
        </span>
                <span class="part1 en">&nbsp;&nbsp;/ Products</span>
                <a class="btn btn-default btn-xs more-btn" href="{% url 'productsApp:products' 'robot' %}">
                    +&nbsp;更多
                </a>
                <div class="line1" style="margin-bottom:5px;">
                    <div class="line2 theme"></div>
                </div>
                <div class="col-md-12 col-pro">
                    <div id="Carousel" class="carousel slide" style="margin-bottom:30px">
                        <ol class="carousel-indicators" style="display:none;">
                            <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="row">
                                    {% for product in productList %}
                                        <div class="col-md-3 pro-images">
                                            <a href="{% url 'productsApp:productDetail' product.id %}"
                                               class="thumbnail">
                                                {% for img in product.productImgs.all %}
                                                    {% if forloop.first %}
                                                        {% with base64_image=img.get_file_base64 %}
                                                            <img class="img-responsive"
                                                                 src="data:image/jpeg;base64,{{ base64_image }}"
                                                                 alt="Award Photo"
                                                                 onload="DrawImage(this)">
                                                        {% endwith %}
                                                    {% endif %}
                                                {% endfor %}
                                            </a>
                                            <div class="carousel-caption nav-title">{{ product.title }}</div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-pro">
            </div>
        </div>
        <div class="row row-3">
            <!-- 友情链接 -->
            <div class="col-md-12">
            </div>
        </div>
    </div>
</div>


{% include 'footer.html' %}

</body>
<script>
  //处理缩略图
  function DrawImage(hotimg) {
    $(hotimg).jqthumb({
      width: '100%', // 宽度
      height: '220px', // 高度
      zoom: '1', // 缩放比例
      method: 'auto' // 提交方法，用于不同的浏览器环境，默认为‘auto’
    });
  }
</script>
</html>